<template>
	<div class="compPanel" :style="{ padding: padding_ }">
		<div v-if="title" class="panelTitle">{{title}}</div>
		<slot />
	</div>
</template>

<script>
	export default {
		props: {
			title: {
				type: [Number, String],
				default: ''
			},
			padding: {
				type: [Number, String],
				default: '10px'
			},
		},
		data: function() {
			return {
			};
		},
		computed: {
			padding_() {
				let padding = String(this.padding).trim();

				if(/^[1-9]\d*(\.\d+)?$/.test(padding)) {
					return `${padding}px`;
				}
				else if(padding) {
					return this.padding;
				}
				else {
					return this.padding;
				}
			},
		},
	};
</script>

<style scoped>
	.compPanel {
		box-sizing: border-box;


		background: snow;

		border-radius: 4px;
		box-shadow: 2px 2px 7px -2px rgba(128, 128, 128, 0.4);

		font-size: inherit;
		line-height: initial;

		overflow: hidden;
	}

	.compPanel>.panelTitle {
		position: relative;

		padding: 0px;
		padding: 0.1rem;
		margin-bottom: 0.3rem;

		border-bottom: 0.1rem solid #60aff1;
		border-image: linear-gradient(90deg, #60aff1 0%, rgba(99, 202, 255, 0.1) 100%) 10;

		width: 100%;

		color: #60aff1;
		font-size: 1.1rem;
		font-weight: bold;
		line-height: 1.6rem;

		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>